<template>
  <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="true" :router="true" @select="handlePush">
    <div v-for="menuItem in menuItems" :key="menuItem.id">
      <el-menu-item v-if="!menuItem.child" :index="menuItem.url">
        <el-icon v-html="menuItem.icon"></el-icon>
        <span slot="title">{{ menuItem.name }}</span>
      </el-menu-item>
      <el-sub-menu v-else :index="menuItem.url">
        <template slot="title">
          <el-icon v-html="menuItem.icon"></el-icon>
          <span slot="title">{{ menuItem.name }}</span>
        </template>
        <el-menu-item-group>
          <m-menu :menu-items="menuItem.child"/>
        </el-menu-item-group>
      </el-sub-menu>
    </div>
    <div v-if="login_state">
      <el-menu-item index="/manage">
        <el-icon><i-avatar /></el-icon>
        <span slot="title">管理博客</span>
      </el-menu-item>
    </div>
    <div style="margin-top: 8px; position: absolute; right: 10px">
      <m-login/>
    </div>
  </el-menu>
</template>

<script>
import {defineComponent} from "vue";
import MLogin from "./Login.vue";

export default defineComponent({
  name: 'm-menu',
  components: {MLogin},
  props: {
    menuItems: Array,
  },
  data() {
    return {
      login_state: Boolean(window.sessionStorage.getItem('login_state')),
    }
  },
  methods: {
    handlePush(path) {
      this.$router.push({path})
    }
  }
})
</script>

<style scoped>

</style>